<template>
  <div>
    <van-search class="search" @input="inputHandle" v-model="queryParams.keywords" shape="round" placeholder="请输入搜索关键词" @clear="clearHandle" />
    <!-- 搜索热词 -->
    <div class="search_wrap" v-if="searchResultList.length === 0">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span @click="getSearchResultByHotKey(item.first)" v-for="(item, index) in hotSearchList" :key="index" class="hot_item">{{ item.first }}</span>
      </div>
    </div>
    <!-- 搜索结果 -->
    <div class="search_wrap" v-else>
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <!-- 瀑布流滚动加载 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadMore">
        <van-cell v-for="item in searchResultList" :key="item.id" center :title="item.name" :label="item.ar[0].name + '-' + item.name">
          <template #right-icon>
            <van-icon @click="toPlay(item.id)" name="play-circle-o" size="22" />
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { hotSearchApi, searchResultsApi } from '@/api/search'
export default {
  data() {
    return {
      // 搜索关键字
      value: '',
      // 热搜词列表
      hotSearchList: [],
      // 搜索结果
      searchResultList: [],
      // 分页参数
      queryParams: {
        page: 1,
        limit: 30,
        keywords: '' // 搜索关键词
      },
      loading: false,
      finished: false,
      // 定义定时器进行防抖
      timer: null
    }
  },
  created() {
    this.getHotSearchList()
  },
  methods: {
    //  获取搜索热词列表
    async getHotSearchList() {
      const {
        result: { hots }
      } = await hotSearchApi()
      this.hotSearchList = hots
    },
    // 调搜索结果的api获取搜索结果
    async getSearchResult() {
      // 调搜索的api接口
      return await searchResultsApi(this.queryParams) // 返回的还是一个Promise对象
    },
    // 点击热词进行搜索
    async getSearchResultByHotKey(keyword) {
      // 给搜索框赋值
      this.queryParams.keywords = keyword
      // 新的搜索关键词需要将页码变成1
      this.queryParams.page = 1
      // 将finished变成false
      this.finished = false
      const { result } = await this.getSearchResult()
      // 赋值
      this.searchResultList = result.songs
    },
    // 输入框关键词改变触发
    inputHandle() {
      // 先清除上一次定时器
      if (this.timer) clearTimeout(this.timer)
      // 开启当前的定时器
      this.timer = setTimeout(async () => {
        if (this.queryParams.keywords.trim().length === 0) {
          this.searchResultList = []
          return
        }
        // 新的搜索关键词需要将页码变成1
        this.queryParams.page = 1
        // 将finished变成false
        this.finished = false
        const { result } = await this.getSearchResult()
        // 搜索关键词没有搜到数据
        if (result.songs === undefined) {
          this.searchResultList = []
          return
        }
        // 赋值
        this.searchResultList = result.songs
      }, 900)
    },
    // 加载更多
    async loadMore() {
      // 改变页码
      this.queryParams.page++
      // 发起当前页码的请求
      const { result } = await this.getSearchResult()
      console.log(result)
      if (result.songs === undefined) {
        // 当前页没有拿到数据，数据数据已经全部加载完毕
        this.finished = true // 全部加载完成(list不会在触发onload方法)
        this.loading = false // 为了在切换新的关键词时能够下来加载,需要将loading设置为false
        return
      }
      // 合并数据:将原来的数据和当前页的数据进行合并
      this.searchResultList = [...this.searchResultList, ...result.songs]
      // 将loading变成false
      this.loading = false
    },
    // 监听清除搜索关键字
    clearHandle() {
      this.queryParams.keywords = ''
      this.searchResultList = []
    },
    // 去播放页
    toPlay(id) {
      this.$router.push(`/play?id=${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  // 吸顶：介于fixed和relative之间
  position: sticky; // 不会脱标，也会固定定位，等同于fixed加设置宽度
  top: 0;
  left: 0;
  z-index: 1000;
}

/* 搜索容器的样式 */
.search_wrap {
  padding: 0px 10px;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 12px;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 10px 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 32px;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 32px;
  color: #333;
  border-color: #d3d4da;
  border-radius: 32px;
  border: 1px solid #d3d4da;
}
.van-cell {
 // padding-top: 20px;
  border-bottom: 1px solid lightgray;
}
</style>